<extend name="public/form"/>
<block name="css">
    <style>
        .layui-table-cell{
            height:auto !important;
            max-height:90px !important;
        }
        .qiniupic li{
            float: left;
            margin: 3px;
            border: 1px solid #ccc;
            position: relative;
            border-radius: 2px;
        }
        .qiniupic li:hover{
            border: 2px solid #00CC33!important;
            margin: 2px;
            border-radius: 2px;
        }
        .qiniupic li:hover i.layui-icon-ok{
            display: block;
        }
        .qiniupic li.active{
            border: 2px solid green;
            margin: 2px;
            border-radius: 2px;
         }
        .qiniupic li i.layui-icon-ok{
            display: none;
            position: absolute;
            right: auto;
            left: 0;
            width: 16px;
            height: 16px;
            line-height: 16px;
            border: 2px solid #d2d2d2;
            font-size: 12px;
            border-radius: 2px;
            background-color: #fff;
            -webkit-transition: .1s linear;
            transition: .1s linear;
            color: #fff;
            text-align: center;
         }
        .qiniupic li i:before{
            content: "\e605";
         }
        .qiniupic li.active i.layui-icon-ok{
            display: block;
            border-color: #5FB878!important;
            background-color: #5FB878;
            color: #fff;
        }

        .qiniupic li img:hover{
            cursor: pointer;
            background: rgba(0, 0, 0, 0.5);
        }
        .qiniupic li img{
            width: 190px;
            height: 147px;
            object-fit: cover;
        }
        .qiniupic li div{
            border-top: 1px solid #ccc;
            text-align: center;
        }
    </style>
</block>
<block name="content">
    <div class="layui-card-header ">
        <span class="layui-breadcrumb">
          <a href="/admin" target="_blank">首页</a>
          <a href="javascript:;">图片管理</a>
          <a><cite>七牛云管理</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh-3" style="line-height:30px"></i></a>
    </div>
    <div class="layui-card-body ">
        <button class="layui-btn layui-btn-danger layui-btn-sm delAll">同步图片</button>
        <button class="layui-btn layui-btn-sm" id="uploud_pic"><i class="layui-icon"></i>上传图片</button>
            <button class="layui-btn layui-btn-sm layui-btn-normal" id="pick_confirm">确定</button>
    </div>
    <div class="layui-card-body ">
        <table class="layui-hide" id="test" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
        <ul class="layui-clear qiniupic" >
        </ul>
        <div id="test1"></div>
    </div>
</block>
<block name="js">
    <script>
        layui.use(['table', 'jquery','laypage','upload','element'], function () {
            var table = layui.table
                $ = layui.jquery,
                laypage = layui.laypage,
                upload = layui.upload,
                form = layui.form;
                single_check=true;//是否单选
                tree_data={};
                limit=30;
            layui.element.render();
            function get_data($page){
                $.ajax({
                    async:false,
                    url: '/admin/qiniuPic/tree',
                    type: 'get',
                    data:{page:$page,limit:limit},
                    dataType:'json',
                    success: function(res){
                        tree_data=res;
                        rendor_li();
                    }
                });
            }
            function rendor_li(){
                var li_str='<li><i class="layui-icon layui-icon-ok"></i><img src="https://pic.4vsy.com/tp.jpg"><div>2019-12-30</div></li>';
                $('.qiniupic').html('');
                for (var i=0;i<tree_data.data.length;i++){
                    var $li= $(li_str);
                    $li.find('img').attr('src',tree_data.data[i].url);
                    $li.find('div').text(tree_data.data[i].last_time);
                    $('.qiniupic').append($li)
                }
            }
            //执行一个laypage实例
            $.ajax({
                async:false,
                url: '/admin/qiniuPic/tree',
                type: 'get',
                data:{limit:limit},
                dataType:'json',
                success: function(res){
                    tree_data=res;
                    rendor_li();
                }
            });
            laypage.render({
                elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: tree_data.count //数据总数，从服务端得到
                ,limit:limit
                ,jump: function(obj,first){
                    if(!first){
                        get_data(obj.curr);
                    }
                }
            });
            //监听工具条
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'detail':
                        layer.msg('ID：' + data.id + ' 的查看操作');
                        break;
                    case 'del':
                        layer.confirm('确定要删除该斑斓图吗？', function (index) {
                            $.ajax({
                                url: '/admin/banner/delete',
                                method: 'post',
                                data: {id:data.id},
                                dataType: 'JSON',
                                success: function (res) {
                                    if (res.code == 0) {
                                        obj.del();
                                        layer.msg('删除成功', {icon: 1});
                                    } else {
                                        layer.msg(res.msg, {icon: 5});
                                    }
                                },
                                error: function (data) {
                                    layer.msg('服务器繁忙', {icon: 5});
                                }
                            });
                            layer.close(index);
                        });
                        break;
                    case 'edit':
                        xadmin.open('编辑', '/admin/banner/edit?id=' + data.id);
                        // layer.alert('编辑行：<br>'+ JSON.stringify(data))
                        break;
                    default:
                        break;
                }
            });
            $('.delAll').on('click', function(){
            layer.confirm('你确定要同步七牛云图片到本地吗？', function (index) {
                layer.load(2);
                $.ajax({
                    url: '/admin/qiniuPic/sync_pic',
                    method: 'get',
                    dataType: 'JSON',
                    success: function (res) {
                        layer.msg(res.msg, {icon: 1});
                        window.location.reload();
                    },
                    error: function (data) {
                        layer.msg('服务器繁忙', {icon: 5});
                    }
                });
                layer.close(index);
            });

            });
            $(document).on("click",".qiniupic li",function(){
                $(this).toggleClass('active');
                if(single_check){
                    $(this).siblings().removeClass('active');
                }
            });
            String.prototype.format_args = function(args) {
                var result = this;
                if (arguments.length > 0) {
                    if (arguments.length == 1 && typeof (args) == "object") {
                        for (var key in args) {
                            if(args[key]!=undefined){
                                var reg = new RegExp("({" + key + "})", "g");
                                result = result.replace(reg, args[key]);
                            }
                        }
                    }
                    else {
                        for (var i = 0; i < arguments.length; i++) {
                            if (arguments[i] != undefined) {
                                var reg= new RegExp("({)" + i + "(})", "g");
                                result = result.replace(reg, arguments[i]);
                            }
                        }
                    }
                }
                return result;
            }
            $('#pick_confirm').click(function () {
                var url=$('.active img').attr('src');
                if(url==undefined){
                    parent.layer.msg('请先选择图片,在点击确定');
                    return false;
                }
                //xadmin.js line 3
                parent.eval(js_str.format_args(url));
                parent.layer.closeAll();
            });

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#uploud_pic'
                , url: '/admin/uploads/upload?type=news_cover'
                , done: function (res) {
                    layer.msg('上传成功！');
                    window.location.reload();
                    //上传成功
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    layer.msg('上传失败', {icon: 5});
                }
            });

        });
    </script>
</block>